<template>
    <div class="cart">
        <div class="top">
            <mu-appbar class="topbar">
                <mu-icon-button icon='arrow_back'  slot="left" @click='back'/>
                <div slot="default" class="default">
                    购物车
                </div>
                <mu-icon-button icon='more_vert'  slot="right" />
            </mu-appbar>
        </div>
        <div class="tip">
            <em icon="grade"></em><span>你正在安全购物环境中，请放心购物</span>
        </div>
        <div class="goodslist">
            <div class="goodstop">
                <mu-checkbox label="全选" class="demo-checkbox" uncheckIcon="favorite_border" checkedIcon="favorite" v-model="allcheck" @change='changall'/> <br/>
            </div>
            <div class="goodsgroup">
                <div class="goods" v-for="(item,index) in cart" :key='index'>
                    <div class="checkbox">
                        <mu-checkbox  class="demo-checkbox" v-model="valuearr[index]" @change='changevalarr(index)'/>
                    </div>
                    <div class="xiangqing">
                            <img :src="item.imgList[0]" alt="" class="img">
                        <div class="news">
                            <p>{{item.title}}</p>
                            <div class="botm">
                                <div class="price">￥<span>{{item.nowPrice}}</span></div>
                                <div class="control">
                                    <span class="subtract" @click='subtract(item.goodid)'></span>
                                    <span class="num">{{item.count}}</span>
                                    <span class="add" @click='add(item.goodid)'></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="del" @click='del(item.goodid)'>
                        删除
                    </div>
                </div>
            </div>
        </div>
        <!--子组件 接受子组件触发的事件-->
        <total v-on:total='changall'></total>
    </div>
</template>
<script>
    import { mapMutations, mapGetters } from 'vuex'
    import total from '../comments/total.vue' 
    export default {
        data(){
            return {
                valuearr:[],
                count:0,
                all:true
            }
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            add(goodid){
                this.$store.commit('addnum',goodid)
            },
            subtract(goodid){
                this.$store.commit('subtract',goodid)
            },
            del(goodid){
                this.$store.commit('del',goodid)
            },
            changevalarr(index){
                this.$store.commit('changeval',{
                    valuearr:this.valuearr,
                    index
                })
            },
            changall(){
                this.$store.commit('NOT')
                this.valuearr =this.value
            }

        },
        components:{
            total,
        },
        computed:{
            ...mapGetters([
                'cart',
                'goodslength',
                'islogin',
                'value',
                'total',
                'allcheck'
            ]),
            
        },
        //进入路由时先确定商品的勾选情况
        beforeRouteEnter(to, from, next){
            next(vm=>{
                vm.valuearr=vm.value
                // vm.valuearr = [];
                // vm.cart.forEach(function(ele,index) {
                //     vm.valuearr.push(true)
                // });
            })
        }
    }
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0
}
.cart{
    padding-bottom: 50px;
}
.top{
    .topbar{
        height:45px;
        .default{
            text-align: center;
            font-size: 18px;
        }
    }
}
.tip{
    height: 35px;
    text-align: center;
    line-height: 35px;
    em{
        font-style: normal;
        width: 19px;
        height: 19px;
        display: inline-block;
        margin-right: 7px;
        vertical-align: text-top;
        background: url('../assets/images/shopping.cart.spirits.icns2.png') 0 -150px no-repeat;
        background-size: 50px 200px;
    }
}
.goodslist{
    padding:10px 5px;
    background-color: #f5f5f5;
    .goodstop{
        background-color:#fff;
        padding: 5px  10px;
    }
    .goods{
        padding-left: 35px;
        padding-bottom: 10px;
        position: relative;
        height: 4.8rem;
        background-color:#fff;
        .del{
            position: absolute;
            bottom:5px;
            right: 15px;
        }
        .checkbox{
            position: absolute;
            top:45%;
            left: 10px;
            transform: translateY(-60%);
            line-height: 0;
        }
        .xiangqing{
            padding-top: .3rem;
            overflow: hidden;
            .img{
            float: left;
            height: 3.5rem;
            width: 3.5rem;
            }
            .news{
                padding-top: 5px;
                float: left;
                height:3.5rem;
                position: relative;
                width: 10rem;
                p{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    font-size:16px;
                    -webkit-box-orient: vertical;
                    text-align:justify;overflow: hidden;
                }
                .botm{
                    position: absolute;
                    bottom: 5px;
                    left: 0;
                    width: 100%;
                    .price{
                        float: left;
                        color: #009688;
                        span{
                            font-size: 18px;
                        }
                    }
                    .control{
                        float:right;
                        >span{
                            float:left;
                            height: 25px;
                            text-align: center;
                        }
                        .num{
                            width: 35px;
                            border-bottom: 1px solid #ADADAD;
                            border-top: 1px solid #ADADAD;
                            font-size:16px;
                            color: #009688;
                        }
                        
                        .subtract{
                            background: url('../assets/images/shopping.cart.spirits.icns2.png') no-repeat -19px -113px;
                        }
                        .add{
                            background: url('../assets/images/shopping.cart.spirits.icns2.png') no-repeat 7px -95px;
                        }
                        .subtract,.add{
                            width: 25px;
                            border: 1px solid #ADADAD;
                            background-size: 50px 200px;
                        }
                    }
                }
            }
        }
        
    }
}
    
</style>